<template>
  <div class="nav_bg">
    <div class="center">
      <el-row>
      <el-col :span="20">
        <ul>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
          <li>
            <RouterLink to="/user/index">商城首页</RouterLink>
          </li>
        </ul>
      </el-col>
      <el-col :span="4">
        <ul class="user">
          <template v-if="!userStr.userInfo">
          <li>
            <RouterLink to="/user/reg">注册</RouterLink>
          </li>
            <li>
              <RouterLink to="/user/login">登录</RouterLink>
            </li>
          </template>
          <template v-else>
            <li>
            <el-link :underline="false" @click="logout">退出 </el-link>
            </li>
            <li>
              <RouterLink to="/user/center">{{userStr.userInfo.username}}</RouterLink>
            </li>
            <li>
              <RouterLink to="/user/cart"><el-icon><ShoppingCart /></el-icon>购物车</RouterLink>
            </li>
          </template>
        </ul>
      </el-col>
      </el-row>
    </div>
  </div>
  <!--头部搜索-->
  <div class="center">
    <el-row>
      <el-col :span="16">
        <img alt="MI Logo" src="/src/assets/幻想商城.png">
      </el-col>
      <el-col :span="8">
        <div class="search">
          <el-button class="search_btn" @click="toSearchView(searchQuery)">
            <el-icon><Search/></el-icon>
          </el-button>
          <!--搜索框-->
          <el-input class="search_input" type="text" v-model="searchQuery"/>
        </div>
      </el-col>
    </el-row>
  </div>
  <!--上架的第一级分类-->
  <div class="center">
    <ul class="category">
      <li v-for="(category, index) in parentList" :key="index"><RouterLink :to="`/user/search/${category.id}`">{{ category.name }}</RouterLink></li>
    </ul>
  </div>
</template>
<script setup>
import {Search} from "@element-plus/icons-vue";
import categoryApi from "@/api/categoryApi.js";
import {ref} from "vue";
import {useUserStore} from "@/stores/User.js";
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";

const router=useRouter();
const userStr=useUserStore();
const tokenStr=useTokenStore();
const parentList=ref([]);
const searchQuery=ref("");
//跳转到商品的搜索界面
function toSearchView(goodsName){
  router.push({
    path:'/user/search',
    query:{
      goodsName
    }
  })
}

function  getParent(){
  const  condition={
    parentId:0,
    status:1
  };
  categoryApi.selectByPage(condition)
      .then(resp =>{
          parentList.value=resp.data;
      })
}
//注销
function logout(){
  //清空token
  tokenStr.$reset();
  //清空用户信息
  userStr.$reset();
  //跳转前台首页
  router.push("/user/index");

}


getParent();
</script>
<style scoped>
.user .el-icon {
  top: 4px;
}
.nav_bg {
  background-color: var(--theme-bg-color);
  line-height: 40px;
}
img{
  width: 80px;
  height: 80px;
}
ul li {
  float: left;
  margin-right: 20px;
}

.user li {
  float: right;
}

a {
  color: #ffffff;
}

a:hover {
  color: aqua;
}
.search{
  padding-top: 20px;
}

.search_input {
  width: 260px;
  float: right;
}

.search_btn {
  float: right;
  color: #ffffff;
  margin-left: 5px;
  background-color: Var(--theme-color);
  border-radius: 0px;
  border: 0px;
}

.search_btn:hover {
  background-color: black;
}

.category{
  background-color: Var(--theme-color);
  line-height: 30px;
  height: 30px;
}

.category li{
  float: left;
  padding:0 5px;
}

.category li a {
  color: #FFF;
}

.category li:hover {
  background-color: black;
}

</style>